<template>
	<view>
		<view :class="isVip?'vip_user':''">
			<view class="page_title">
				<nav-back></nav-back>
				<view class="page_name">详情</view>
				<view class="blank"></view>
			</view>
			<view class="banxin ">
				<!-- <scroll-view scroll-y class="scroll"> -->
				<view class="vip_bg">
					<image v-if="isVip" src="/static/img/vip_bg.png" mode="" />
				</view>
				<view class="base">
					<view class="avatar">
						<image :src="userDetails.avatar" mode="" />
						<image v-if="isVip" class="vip" src="/static/img/vip.png" mode="" />
					</view>
					<view class="base_info">
						<view class="name">
							<view>{{userDetails.name}}</view>
							<image v-if="userDetails.sex==0" class="sex" src="/static/img/woman.png" mode="" />
							<image v-if="userDetails.sex==1" class="sex" src="/static/img/man.png" mode="" />
							<image v-if="userDetails.authentication&&userDetails.authentication.realNameStatus==0"
								class="nameauth" src="/static/img/nameauth.png" mode="" />
						</view>
						<view class="age">{{userDetails.age}}岁 {{userDetails.height}}cm
							{{userDetails.education?userDetails.education:''}}
						</view>
					</view>
					<view class="islike">
						<image @click="handleLike(1)" v-if="islike" class="like" src="/static/img/like.png" mode="" />
						<image @click="handleLike(0)" v-else class="nolike" src="/static/img/nolike.png" mode="" />
						<view class="heartbeat">心动</view>
					</view>
				</view>
				<view class="address">
					<image v-if="isVip" src="/static/img/address_vip.png" mode="" />
					<image v-else src="/static/img/address_normal.png" mode="" />
					<text class="info" :decode="true" space="true">
						家 &ensp;&ensp;&ensp; 乡：{{userDetails.homeTown}}
						工作地区：{{userDetails.workingArea}}
					</text>
				</view>
				<view class="auth">
					<view class="auth_title">
						Ta的认证
					</view>
					<view class="auth_list">
						<view class="auth_info">
							<image v-if="userDetails.authentication&&userDetails.authentication.realNameStatus==0"
								src="/static/img/authed.png" mode="" />
							<image v-else src="/static/img/toauth.png" mode="" />
							<view class="name_auth">
								<image src="/static/img/name.png" mode="" />
							</view>
							<text>实名认证</text>
						</view>
						<view class="auth_info">
							<image v-if="userDetails.authentication&&userDetails.authentication.singleStatus==0"
								src="/static/img/signed.png" mode="" />
							<image v-else src="/static/img/toauth.png" mode="" />
							<view class="single_auth">
								<image src="/static/img/single.png" mode="" />
							</view>
							<text>单身承诺</text>
						</view>
						<view class="auth_info">
							<image v-if="userDetails.authentication&&userDetails.authentication.educationStatus==0"
								src="/static/img/authed.png" mode="" />
							<image v-else src="/static/img/toauth.png" mode="" />
							<view class="education_auth">
								<image src="/static/img/education.png" mode="" />
							</view>
							<text>学历认证</text>
						</view>
						<view class="auth_info">
							<image v-if="userDetails.authentication&&userDetails.authentication.buildingStatus==0"
								src="/static/img/authed.png" mode="" />
							<image v-else src="/static/img/toauth.png" mode="" />
							<view class="house_auth">
								<image src="/static/img/house.png" mode="" />
							</view>
							<text>房产认证</text>
						</view>
					</view>
				</view>

				<view class="user_info">
					<view class="info_title">
						个人资料
					</view>
					<view class="info_list">
						<view v-if="userDetails.profession" class="info">{{userDetails.profession}}</view>
						<view v-if="userDetails.carStatus" class="info">{{userDetails.carStatus}}</view>
						<view v-if="userDetails.weight" class="info">{{userDetails.weight}}kg</view>
						<view v-if="userDetails.income" class="info">月收入{{userDetails.income}}</view>
						<view v-if="userDetails.houseStatus" class="info">{{userDetails.houseStatus}}</view>
					</view>
				</view>

				<view class="user_info">
					<view class="info_title">
						理想另一半
					</view>
					<view class="info_list">
						<view v-if="userDetails.spouse&&userDetails.spouse.minHeight" class="info">
							{{userDetails.spouse&&userDetails.spouse.minHeight}}-{{userDetails.spouse&&userDetails.spouse.maxHeight}}cm
						</view>
						<view v-if="userDetails.spouse&&userDetails.spouse.minAge" class="info">
							{{userDetails.spouse&&userDetails.spouse.minAge}}-{{userDetails.spouse&&userDetails.spouse.maxAge}}岁
						</view>
						<view v-if="userDetails.spouse&&userDetails.spouse.education" class="info">
							{{userDetails.spouse&&userDetails.spouse.education}}
						</view>
						<view v-if="userDetails.spouse&&userDetails.spouse.income" class="info">
							月入{{userDetails.spouse&&userDetails.spouse.income}}</view>
					</view>
				</view>
				<view class="next" @click="handleNext" v-if="userIds.length!=0">
					<image v-if="isVip" src="/static/img/next_vip.png" mode="" />
					<image v-else src="/static/img/next_user.png" mode="" />
				</view>
				<!-- </scroll-view> -->

				<view class="stringing">
					<view class="matchmaker" @click="handleMatcher">红娘牵线</view>
					<view class="rightnow" @click="handleStringing">立即牵线</view>
				</view>
			</view>


			<u-popup closeable :show="showPopup" mode='center' @close="handleClose">
				<view class="matcher">
					<image src="/static/img/matcher.png" mode="" />
				</view>
				<view class="title">
					Ta的专属服务红娘：小红
				</view>
				<view class="tip">
					长按二维码添加红娘微信
				</view>
				<view class="code">
					<image :show-menu-by-longpress="true" src="/static/img/wx_code.png" mode="" />
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				islike: false,
				isVip: false,
				userDetails: {
					authentication: {},
					spouse: {}
				},
				showPopup: false,
				userId: '',
				userIds: [],
				userIndex: 0
			};
		},
		onLoad(option) {
			console.log(option, 'option');
			this.userId = option.id
			this.userIds = option.ids ? JSON.parse(option.ids) : []
			this.userIndex = Number(option.index)
			this.initInfo()
		},
		methods: {
			initInfo() {
				let that = this
				request(`/employee/${this.userId}`).then((res) => {
					// console.log(res.data.data,'authentication');
					this.userDetails = res.data.data
					that.islike = this.userDetails.heart
					that.isVip = this.userDetails.isVip
					console.log(this.userDetails, 'userDetails');
				})
			},
			handleLike(type) {
				if (type == 0) {
					request(`/heartBeat/insert`, {
						method: 'POST',
						data: {
							heartBeatBy: this.userId
						}
					}).then((res) => {
						console.log(res.data, 'res');
						this.islike = true
					})
				} else {
					request(`/heartBeat/delete?id=${this.userId}`, {}).then((res) => {
						console.log(res.data, 'res');
						this.islike = false
					})
				}
			},
			handleNext() {
				console.log(this.userIds, this.userIndex, 'handleNext');
				if (this.userIds.length - 1 > this.userIndex) {
					this.userId = this.userIds[++this.userIndex]
					this.initInfo()
				} else {
					uni.showToast({
						title: '当前是最后一位',
						icon: 'none',
						duration: 2000
					})
					return
				}
			},
			handleMatcher() {
				console.log('handleMatcher');
				this.showPopup = true
			},
			handleStringing() {
				request(`/bridge/insert`, {
					method: 'POST',
					data: {
						applicant: uni.getStorageSync('id'),
						apply: this.userId
					}
				}).then((res) => {
					console.log(res.data, 'res');
					if (res.data.code == 1) {
						uni.showToast({
							title: '已向对方申请牵线',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			handleClose() {
				this.showPopup = false
			},
		}
	}
</script>

<style lang="scss">
	@import "@/style/mstcher.scss";

	.scroll {
		height: 40vh;
		margin-top: 0;
		background-color: #afff63;
	}

	.banxin {
		height: 75vh;
		overflow: auto;
	}

	.base {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		margin-top: 30rpx;

		.avatar {
			position: relative;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.vip {
				display: none;
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}

		.base_info {
			flex: 1;
			margin: 15rpx 20rpx;

			.name {
				font-weight: 500;
				display: flex;
				align-items: center;
				line-height: 46rpx;
				color: rgba(102, 102, 102, 1);

				view {
					max-width: 200rpx;
					white-space: nowrap;
					/* 确保文本在一行内显示 */
					overflow: hidden;
					/* 隐藏溢出的内容 */
					text-overflow: ellipsis;
					// color: rgba(51, 51, 51, 1);
				}
			}

			.age {
				font-size: 24rpx;
				line-height: 34rpx;
				margin-top: 20rpx;
			}

			.sex {
				width: 40rpx;
				height: 40rpx;
				margin: 0 30rpx;
			}

			.nameauth {
				width: 90rpx;
				height: 30rpx;
			}
		}

		.islike {
			// width: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: rgba(166, 166, 166, 1);

			image {
				display: block;
				width: 60rpx;
				height: 60rpx;
				margin: auto;
			}

			.heartbeat {
				margin-top: 10rpx;
				font-size: 20rpx;
			}
		}
	}

	.address {
		display: flex;
		align-items: flex-start;
		// background-color: #ffd6a6;
		margin-top: 20rpx;
		line-height: 40rpx;
		align-items: center;
		color: rgba(102, 102, 102, 1);

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
			margin-top: -35rpx;
		}

		text {
			font-size: 24rpx;
		}
	}

	.auth {
		margin-top: 40rpx;

		.auth_title {
			font-weight: 500;
			line-height: 46rpx;
			margin: 20rpx 0;
		}

		.auth_list {
			display: flex;
			justify-content: space-between;

			image {
				width: 48rpx;
				height: 48rpx;
				margin: auto;
			}

			.auth_info {
				width: 120rpx;
				padding-top: 10rpx;
				// background-color: rgb(129, 117, 117);
				position: relative;

				>image {
					width: 64rpx;
					height: 26rpx;
					position: absolute;
					top: 0;
					right: 0;
				}

				view {
					width: 80rpx;
					height: 80rpx;
					margin: 0 auto;
					display: flex;
					border-radius: 50%;
				}

				text {
					display: block;
					font-size: 20rpx;
					text-align: center;
					margin-top: 10rpx;
					line-height: 40rpx;
				}
			}

			.name_auth {
				background-color: rgba(239, 255, 204, 1);
			}

			.single_auth {
				background-color: rgba(255, 232, 232, 1);
			}

			.education_auth {
				background-color: rgba(212, 232, 255, 1);
			}

			.house_auth {
				background-color: rgba(255, 236, 217, 1);
			}
		}
	}

	.user_info {
		margin-top: 50rpx;

		.info_title {
			font-weight: 500;
			line-height: 46rpx;
			margin: 20rpx 0;
		}

		.info_list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.info {
				font-size: 28rpx;
				margin-right: 10rpx;
				padding: 15rpx 20rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				color: rgba(107, 107, 255, 1);
				background-color: rgba(235, 235, 255, 1);
			}
		}
	}

	.next {
		image {
			position: fixed;
			width: 160rpx;
			height: 60rpx;
			bottom: 240rpx;
			right: 0;
		}
	}

	.stringing {
		position: absolute;
		width: 85%;
		bottom: 30rpx;
		display: flex;
		justify-content: space-between;

		view {
			width: 300rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 60rpx;
		}

		.matchmaker {
			color: rgba(107, 107, 255, 1);
			background-color: rgba(235, 235, 255, 1);
		}

		.rightnow {
			color: rgba(255, 255, 255, 1);
			background-color: rgba(156, 156, 255, 1);
		}
	}

	.vip_user {
		// position: absolute;
		// top: 0;
		// left: 0;
		box-sizing: border-box;
		overflow: hidden;
		height: 100vh;
		background-image: url('@/static/img/vip_bg.png');
		background-size: contain;
		background-position: 15% 15%;
		color: rgba(255, 255, 255, 1);
		background-color: rgba(48, 48, 48, 1);
		z-index: -10;

		.base_info {
			.name {
				color: rgba(255, 255, 255, 1);
			}
		}

		.vip_bg {
			image {
				position: fixed;
				width: 100vw;
				height: 800rpx;
				top: 200rpx;
				left: 0;
				z-index: -1;
			}
		}

		.avatar {
			position: relative;

			image {
				border: 5rpx solid rgba(240, 184, 0, 1);
			}

			.vip {
				display: block;
			}
		}

		.address {
			color: rgba(255, 255, 255, 1);
		}

		.name {
			color: rgba(243, 210, 166, 1);
		}

		.user_info {
			.info {
				color: rgba(243, 210, 166, 1);
				background-color: rgba(36, 34, 47, 1);
			}
		}

		.stringing {
			.matchmaker {
				color: rgba(255, 120, 105, 1);
				background-color: rgba(255, 204, 204, 1);
			}

			.rightnow {
				color: rgba(51, 51, 51, 1);
				background-color: rgba(243, 210, 166, 1);
			}
		}
	}
</style>